<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.table.AnnotationInfoList.InfoTitle')"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :minHeight="400"
      :width="800"
      :okText="t('routes.table.flowExampleList.exportAnnotation')"
    >
      <BasicForm @register="registerForm" />
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { AnnotationInfo } from './flowData';
  import { ExportPostilExcel } from '/@/api/demo/flow';

  const { t } = useI18n();
  const currentRecord = ref<any>({});
  const currentResult = ref<any>({});

  // 基本属性
  const [registerForm, { setFieldsValue }] = useForm({
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
    schemas: AnnotationInfo(),
    showActionButtonGroup: false,
  });

  // 定义弹窗是否可见
  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    currentRecord.value = data.record;
    currentResult.value = data.result;
    setFieldsValue(data.result);
  });

  // 提交
  async function handleSubmit() {
    await ExportPostilExcel(currentRecord.value.id, currentResult.value.fileName + '.xlsx');
    handleCancel();
  }

  // 取消
  function handleCancel() {
    closeModal();
  }
</script>

<style scoped></style>
